<template lang="jade">
.content-block
  .item-list
    ul
      li(v-for="el in list")
        img(:src="el.img")
        .item-description
          .title {{el.title}}
          .subtitle {{el.subtitle}}
          .sub-subtitle
            .title ￥{{el.price | money}}
              span ￥{{el.originPrice | money}}
            .after
              i.fa.fa-shopping-cart
              | 100人买过
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [
            {
              img: 'http://img3.imgtn.bdimg.com/it/u=2306489014,2166417261&fm=21&gp=0.jpg',
              title: 'Macbook Pro',
              subtitle: '苹果电脑',
              price: 9800,
              originPrice: 9999
            },
            {
              img: 'http://www.fjlqw.cn/uploads/allimg/160317/1S1194350_0.jpg',
              title: 'iPhone 6',
              subtitle: 'Bigger than bigger',
              price: 4800,
              originPrice: 5000
            }
          ]
        }
      }
    },
    filters: {
      money(p) {
        return p && p.toFixed(2)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../less/libs/mixins.less";
  @gray: #666;
  ul li {
    list-style: none;
  }
  .content-block {
    // padding-right: 8px;
  }
  .item-list {
    ul {
      background-color: #eee;
    }
    ul li {
      background-color: #fff;
      margin-bottom: 0.8rem;
      img {
        width: 100%;
        display: block;
      }
      .item-description {
        padding: 0.3rem 0.8rem;
        .title {
          font-size: 1.2rem;
        }
        .subtitle {
          font-size: 0.8rem;
          color: @gray;
        }
        .sub-subtitle {
          * {
            display: inline-block;
          }
          .title {
            color: red;
            font-size: 1.2rem;
            width: 50%;
            span {
              ._origin-price;
            }
          }
          .after {
            width: 50%;
            color: @gray;
            text-align: right;
            font-size: 0.8rem;
            i {
              margin-right: 0.3rem;
            }
          }
        }
      }
    }
  }
</style>
